<template>
	<view class="uni_box home">
		<navbar title='我的收藏' :yin="true">
		</navbar>
		<view class="content">
			<u-sticky :offset-top="BarHeight()" h5-nav-height="44">
				<view class="leiview">
					<view class="leiitem " :class="item.id==headtype.id?'leiactive':''" v-for="(item,index) in head" :key="index" @click="headClick(item)">{{item.name}}</view>
				</view>
			</u-sticky>
			<view class="olist">
				<view class="oitem" v-for="(item,index) in list" :key="index">
					<view class="dtwo">
						<image :src="item.image" class="listimg" mode=""></image>
						<view class="dright">
							<text class="name">{{item.title}}</text>
							<view class="jview">
								<!-- <u-icon name="star" color="#FF7D29" size="20"></u-icon> -->
								<u-icon name="star-fill" color="#FF7D29" size="20"></u-icon>
								<text class="qian">￥{{item.price}}</text>
							</view>
							<view class="zong">
								<view class="btn" @click="getkexi(item)">购买</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				head:[],
				headtype:{},
				list: [],
				page: 1,
				limit: 10,
				last_page: 1,
				status: "loadmore",
			}
		},
		onLoad() {
			this.gethead();
		},
		onShow() {
		},
		onReachBottom: function () {
			this.loadmore();
		},
		methods: {
			getkexi(item){
				// this.navrouter("/pages_subject/twoPage/TiPage/KePractice");
			},
			async gethead(){
				let res = await this.$u.api.getCollectionType({
				});
				let head = []
				let shuju = res
				for(let i in shuju){
					let a = {}
					a.name = shuju[i]
					a.id = i
					head.push(a)
				}
				this.head = head
				this.headtype = this.head[0]
				this.getList()
			},
			async getList(){
				let res = await this.$u.api.getCollectionList({
					page:this.page,
					type_id:this.headtype.id
				});
				this.last_page = res.lastpage;
				let list = res.list;
				this.list = this.page == 1 ? list : [...this.list, ...list];	
				if(this.page >= this.last_page){
				  this.status = 'nomore';
				}
			},
			loadmore() {
				let page = this.page;
				// let last_page = this.last_page;
				if (this.status == 'loadmore') {
					this.page++;
					this.getList();
				}
			},
			getClear(){
				this.list = []
				this.page = 1,
				this.status= "loadmore"
				this.getList()
			},
			headClick(item){
				this.headtype = item
				this.getClear()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		// padding-bottom: 150rpx;
		.leiview{
			padding: 20rpx 30rpx;
			background-color: #fff;
			z-index: 100;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			.leiitem{
				height: 66rpx;
				background: #AAAAAA;
				border-radius: 33rpx;
				width: 46%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}
			.leiactive{
				background: #E8433A;
				color: #fff;
			}
			
			// margin-top:  calc(var(--window-top));
		}
		.olist{
			display: flex;
			flex-direction: column;
			padding-bottom: 50rpx;
			.oitem{
				padding:20rpx 30rpx;
				border-bottom: 18rpx solid #F6F7FB;
				.done{
					display: flex;
					flex-direction: row;
					align-items: center;
					flex-direction: row;
					margin-bottom: 20rpx;
				}
				.dinname{
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}
				.ztai{
					margin-left: auto;
					font-weight: bold;
					font-size: 22rpx;
					color: #14A1F2;
				}
				.dtwo{
					// background: #F5F5F5;
					// border-radius: 10rpx;
					padding: 10rpx;
					display: flex;
					flex-direction: row;
					.listimg{
						width: 212rpx;
						height: 136rpx;
						border-radius: 8rpx;
						margin-right: 10rpx;
					}
					.dright{
						display: flex;
						flex: 1;
						flex-direction: column;
						padding: 15rpx 15rpx 10rpx 10rpx;
						.name{
							font-weight: 500;
							font-size: 22rpx;
							color: #333333;
						}
						.jview{
							display: flex;
							margin-top: 15rpx;
							flex-direction: row;
							align-items: center;
							.qian{
								font-weight: 500;
								font-size: 22rpx;
								color: #E8433A;
							}
							.shu{
								margin-left: auto;
								font-weight: 500;
								font-size: 20rpx;
								color: #999999;
							}
						}
						.dintime{
							margin-top: auto;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #999999;
						}
					}
				}
				
			}
		}
		.zong{
			display: flex;
			align-items: center;
			// margin: 23rpx 0 0;
			justify-content: flex-end;
			.zongtit{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 18rpx;
				color: #AAAAAA;
			}
			.zonnum{
				color: #E8433A;
			}
			.btn{
				padding: 5rpx 30rpx;
				border-radius: 32rpx;
				background: linear-gradient(-90deg, #FA4E4E, #FD894F);
				// border: 2rpx solid #AAAAAA;
				margin-left: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #fff;
			}
		}
	}
</style>
